<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .add{
            width: 400px;
            height: 300px;
            background-color: #d1cece;
           padding-left: 15px;
           margin-bottom: 20px;
        }
        .add input{
            width: 200px;
            height: 25px;
            margin: 10px 0 10px 0;
        }
        .add p{
            display: inline-block;
            width: 80px;
        }
        .add button{
            width: 100px;
            border: 1px solid black;
        }
        .keep{
            background: rgba(11, 11, 175, 0.585);
        }
        table{
            margin-top: 15px;
            border-collapse: collapse;
        }
        td{
            width: 150px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-top:1px solid #000;
            font-size: 24px;
        }

        .change{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            position: fixed;
            top:0;
            left: 0;
        }

        .change>div{
            width: 500px;
            height: 500px;
            padding: 30px 15px;
            background: #fff;

        }
        .change input{
            width: 200px;
            height: 25px;
            margin: 10px 0 10px 0;
        }
        .change p{
            display: inline-block;
            width: 80px;
        }
        .change button{
            margin-top: 10px;
            width: 100px;
            border: 1px solid black;
        }
        .hold {
           background: rgba(5, 5, 150, 0.673);
        }
        .revise {
            background: chartreuse;
        }
        .del{
            background: red;
        }

    </style>
</head>
<body>
    <div class="add">
        <h3>表单</h3>
       <div><p>姓名</p><input type="text" name="name"></div>
       <div><p>联系电话</p><input type="text" name="phone"></div>
       <div><p>学历</p><input type="text" name="study"></div>
       <div><p>年龄</p><input type="text" name="age"></div>
       <div><p>期望薪资</p><input type="text" name="money"></div>
        <button class="keep">保存</button>
        <button class="reset">重置</button>
    </div>
        <hr>
        <div class="form">
        <table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>联系电话</td>
                    <td>学历</td>
                    <td>年龄</td>
                    <td>期望薪资</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
               
            </tbody>
        </table>
    </div>

    <div class="change">
        <div>
            <hr>
            <div><p>姓名</p><input type="text" name="name"></div>
            <div><p>联系电话</p><input type="text" name="phone"></div>
            <div><p>学历</p><input type="text" name="study"></div>
            <div><p>年龄</p><input type="text" name="age"></div>
            <div><p>期望薪资</p><input type="text" name="money"></div>
            <hr>
            <button class="close">关闭</button>
            <button class="hold">保存修改</button>
        </div>
    </div>
    


    <script>
        // const arr=[
        //     {name:'张三',phone:123456,study:'专科',age:18,money:'18000'},
        //     {name:'李四',phone:123456,study:'本科',age:19,money:'17000'},
        //     {name:'王五',phone:123456,study:'本科',age:20,money:'10700'},
        //     {name:'赵六',phone:123456,study:'专科',age:21,money:'12000'},
        //     {name:'刘七',phone:123456,study:'哈弗',age:22,money:'122'},
        // ];
        let arr = [];
        let arr1 = JSON.parse(localStorage.getItem('recent'));
        const oTbody = document.querySelector('tbody');

        // 获取input标签
        // 姓名 电话 学历 年龄 薪资
        const oAdd = document.querySelector('.add')
        const oIptName = oAdd.querySelector('[name="name"]');
        const oIptPhone = oAdd.querySelector('[name="phone"]');
        const oIptStudy = oAdd.querySelector('[name="study"]');
        const oIptAge = oAdd.querySelector('[name="age"]');
        const oIptMoney = oAdd.querySelector('[name="money"]');
        // 获取保存button 
        const oBtnKeep = oAdd.querySelector('.keep');
        // 重置
        const oBtnReset = oAdd.querySelector('.reset');


        // 修改事件的标签
        const oChange=document.querySelector('.change');
        const oBtnClose = document.querySelector('.close');
        const oBtnHold  = document.querySelector('.hold');
        const oNameChange = oChange.querySelector('[name="name"]');
        const oStudyChange = oChange.querySelector('[name="study"]');
        const oPhoneChange = oChange.querySelector('[name="phone"]');
        const oAgeChange = oChange.querySelector('[name="age"]');
        const oMoneyChange = oChange.querySelector('[name="money"]');
        let index;

        setPage();
        


        // 新增点击事件
        oBtnKeep.addEventListener('click',function(){
            if(window.confirm('您确定保存吗？')){
                // 获取数据
                // 姓名
                let name = oIptName.value;
                let phone = oIptPhone.value-0;
                let study = oIptStudy.value;
                let age = oIptAge.value-0;
                let money = oIptMoney.value-0 ;
                arr.push({name:name,phone:phone,study:study,age:age,money:money});
                console.log(arr);
                localStorage.setItem('recent',JSON.stringify(arr));
                arr1 = JSON.parse(localStorage.getItem('recent'));
                setPage();
            }
        })
        // 重置
        oBtnReset.addEventListener('click',function(){
            oIptName.value='';
            oIptPhone.value='';
            oIptStudy.value='';
            oIptAge.value='';
            oIptMoney.value='';
        });

        // 修改事件
        oTbody.addEventListener('click',function(e){
            if(e.target.getAttribute('name')==='del'){
                arr.splice(Number(e.target.getAttribute('index')),1);
                localStorage.setItem('recent',JSON.stringify(arr));
                arr1 = JSON.parse(localStorage.getItem('recent'))
                setPage();

            }else if(e.target.getAttribute('name')==='revise'){
                oChange.style.display='flex';
                index=Number(e.target.getAttribute('index'));
                oNameChange.value = arr1[index].name;
                oPhoneChange.value = arr1[index].phone;
                oStudyChange.value = arr1[index].study;
                oAgeChange.value= arr1[index].age;
                oMoneyChange.value= arr1[index].money;

               
            }

            

        });
        oBtnHold.addEventListener('click',function(){
                    let name1 = oNameChange.value;
                    let phone1= oPhoneChange.value-0;
                    let study1 = oStudyChange.value;
                    let age1 = oAgeChange.value-0;
                    let money1 = oMoneyChange.value-0 ;
                    arr1[index].name = name1;
                    arr1[index].phone = phone1;
                    arr1[index].study = study1;
                    arr1[index].age = age1;
                    arr1[index].money = money1;
                    setPage();
                })
       

        oBtnClose.addEventListener('click',function(){
            oChange.style.display='none';
        });





        function setPage(){
            if(arr.length===0){
                oTbody.innerHTML=`<tr><td colspan="6">没有匹配的数据</td></tr>`
                return;
            }
            let str ='';
            arr1.forEach(function(item,key){
                str+=` 
                <tr>
                    <td>${item.name}</td>
                    <td>${item.phone}</td>
                    <td>${item.study}</td>
                    <td>${item.age}</td>
                    <td>${item.money}</td>
                    
                    <td><button name="revise" index="${key}" class="revise">修改</button>  <button name="del" index="${key}"  class="del">删除</button></td>
                </tr>
                `
            })
            oTbody.innerHTML=str;
        }

    </script>
</body>
</html>